<template>
	<view class="goods-list">
		<view class="goods-item" v-for="item in goodsList">
			<image :src="item.image" mode="aspectFit"></image>
			<view class="goods-info">
				<text class="goods-title">{{ item.title }}</text>
				<text class="goods-points">积分：{{ item.points }}</text>
				<button class="add-cart-btn" @click="addToCart(item)">兑换</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [{
						id: 1,
						title: "商品1",
						image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.KimEhSz-32Fnz8sDri8H-wHaHa?w=219&h=183&c=7&r=0&o=5&dpr=1.3&pid=1.7",
						points: "1000"
					},
					{
						id: 2,
						title: "商品2",
						image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.fC-pvbLcqNLlgy4XU7B1_wHaFj?w=233&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
						points: "2000"
					},
					{
						id: 3,
						title: "商品3",
						image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.1GLisPNWxLNCVNBHrE8F5AHaD3?w=333&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
						points: "3000"
					}
				]
			};
		},
		methods: {
			addToCart(item) {			    
			    uni.showToast({
			      title: "兑换成功"
			    });
			  }
		}
	};
</script>

<style>
.goods-list {
  display: flex;
  flex-wrap: wrap;
}

.goods-item {
  width: 45%;
  margin: 2%;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.image {
  width: 100%;
  height: 200rpx;
  margin-bottom: 10rpx;
}

.goods-title {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.goods-points {
  font-size: 24rpx;
  color: #F44336;
  margin-bottom: 10rpx;
}

.add-cart-btn {
  background-color: #F44336;
  color: #fff;
  border: none;
  border-radius: 4rpx;
  font-size: 28rpx;
  padding: 12rpx 20rpx;
}

.add-cart-btn:hover {
  background-color: #ff6969;
}
</style>